<template>
  <div class="header">
    <div class="logo">
      <div>IDEAL</div>
    </div>

    <div class="header-right">
      <div class="title">
        <div class="chTitle">面向飞机全生命周期的数字管理环境</div>
        <div class="enTitle">Integrated DIgital Environment For Aircraft Lifecycle</div>
      </div>
      <div class="chooseModelAndRole">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
          <el-form-item label="切换机型:">
            <el-select v-model="queryParams.airplaneType" placeholder="请选择">
              <el-option
                v-for="(item, key) in airplaneType"
                :key="key"
                :value="item"
                :label="item"
                size="small"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="切换角色:">
            <el-select v-model="queryParams.role" placeholder="请选择">
              <el-option
                v-for="(item, key) in rolesName"
                :key="key"
                :value="item"
                :label="item"
                size="small"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="help" @click="helpCenter">
          <i class="el-icon-info"></i>
          <span>帮助中心</span>
        </div>
        <svg class="icon svg-icon iconUser" aria-hidden="true" style="width:60px">
          <use xlink:href="#icon-user" />
        </svg>
        <div class="name">{{user.loginuser}}:</div>
        <div class="part">{{user.userDept}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {
      queryParams: {
        aircraftModel: '',
        role: ''
      },
      roles2: [
        '设计工程师',
        'System Supplier',
        '北研工程师',
        '成本工程师',
        '构型管理人员',
        '管理员',
        '机体供应商',
        '基础能力档案',
        '基础能力工程师',
        '客服工程师',
        '宽体设计工程师',
        '联合设计',
        '商飞领导',
        '商飞总部',
        '设计档案',
        '试飞工程师',
        '适航审定中心',
        '制造档案',
        '制造工程师',
        '总布置工程师',
        '系统供应商'
      ],
      roles: {
        C919: [
          '设计工程师',
          'System Supplier',
          '北研工程师',
          '成本工程师',
          '构型管理人员',
          '管理员',
          '机体供应商',
          '基础能力档案',
          '基础能力工程师',
          '客服工程师',
          '宽体设计工程师',
          '联合设计',
          '商飞领导',
          '商飞总部',
          '设计档案',
          '试飞工程师',
          '适航审定中心',
          '制造档案',
          '制造工程师',
          '总布置工程师'
        ],
        ARJ21: [
          '设计工程师',
          '北研工程师',
          '管理员',
          '机体供应商',
          '基础能力档案',
          '基础能力工程师',
          '客服工程师',
          '商飞总部',
          '设计档案',
          '试飞工程师',
          '制造档案',
          '制造工程师'
        ],
        CXF: [
          '设计工程师',
          'System Supplier',
          '北研工程师',
          '成本工程师',
          '构型管理人员',
          '管理员',
          '机体供应商',
          '基础能力工程师',
          '客服工程师',
          '宽体设计工程师',
          '商飞领导',
          '设计档案',
          '试飞工程师',
          '制造档案',
          '制造工程师',
          '系统供应商'
        ]
      },
      // user: {
      //   loginuser: 'admin',
      //   userDept: '商飞领导'
      // },
      // 机型
      airplaneType: ['C919', 'ARJ21', 'CXF'],
      n: 1
    }
  },
  computed: {
    ...mapState('User', [
      'aircraftModels',
      'aircraftModel',
      'rolesName',
      'roleName',
      'user'
    ]),
    ...mapState('Sidebar', []),
    role: {
      get () {
        return this.roleName
      },
      set (val) {
        this.setRoleName(val)
      }
    }
  },
  watch: {
    'queryParams.aircraftModel' (val) {
      // 判断当前机型下是否有已选角色。如果选择机型时，角色中没有当前角色，把此机型对应的角色第一个默认已选

      this.setAircraftModel(val)
      this.getAllApp()
    },
    'queryParams.role' (val) {
      this.setRoleName(val)
      this.getAllApp()
      this.getDotasks({ roleName: this.roleName })
    }
  },
  async created () {
    // 初始化机型和角色
    this.user = await this.getUser()
    this.queryParams.aircraftModel = sessionStorage.getItem('aircraftModel') || this.aircraftModels[0]
    this.queryParams.role = this.roleName
    this.setAircraftModel(this.queryParams.aircraftModel)
  },
  methods: {
    ...mapMutations({
      setAircraftModel: 'User/setAircraftModel',
      setRolesName: 'User/setRolesName',
      setRoleName: 'User/setRoleName'
    }),
    ...mapActions({
      getUser: 'User/getUser',
      getAllApp: 'Sidebar/getAllApp',
      getDotasks: 'Body/getDotasks'
    }),
    helpCenter () {
      window.open(
        'http://pdm.ideal.com/Windchill/netmarkets/jsp/custom/idealHelp.jsp?tab=home'
      )
    }
  }
}
</script>
<style scoped lang="less">
.header {
  box-sizing: border-box;
  width: 100%;
  height: 64px;
  font-size: 22px;
  color: #fff;
  background: #3182dd;
}
.header .logo {
  float: left;
  width: 250px;
  box-sizing: border-box;
  height: 64px;
  line-height: 64px;
  padding: 0 10px;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  // display: flex;
  // justify-content: space-between;
  .name {
    font-size: 14px;
  }
  .part {
    font-size: 14px;
  }
}
.header-right {
  display: flex;
  justify-content: space-between;
  background: linear-gradient(90deg, #3182dd, #17be63);
  height: 64px;
  overflow: hidden;
  .title {
    font-family: Microsoft YaHei;
    padding: 10px 0;
    .chTitle {
      font-size: 20px;
    }
    .enTitle {
      font-size: 12px;
    }
  }
  .chooseModelAndRole {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    height: 54px;
    /deep/ .el-input__inner {
      width: 160px;
      height: 34px;
    }
    .help {
      //   float: right;
      font-size: 12px;
      padding-top: 12px;
      margin-right: 12px;
      cursor: pointer;
    }
    .iconUser {
      width: 60px;
    }
    .name {
      font-size: 14px;
      display: flex;
      align-items: center;
    }
    .part {
      font-size: 14px;
      display: flex;
      align-items: center;
      margin-right:10px;
    }
  }
}
</style>
